<script setup lang='ts'>
  import { reactive, computed } from 'vue';
  import { numberApi } from '@/api/controller'
  const props = defineProps({
    user_id:{
      type:[Number,String],
      default:''
    }
  })
  const uuid = computed({
    get(){
      return props.user_id
    },
    set(val){
      return val
    }
  })
  const $emit = defineEmits(['update:user_id','update:uuid','update:kk_balance'])
  const action = reactive({
    loading:false,
    options:[] as Array<any>
  })
  const remoteMethod = (query:any='')=>{
    if(!query || query.length < 5) return
    action.options = []
    action.loading = true
    numberApi.allNumbers({uuid:query}).then(res=>{
      action.loading = false
      const { data=[] } = res
      action.options = data
    })
  }
  const selectChange = (user_id:any='')=>{
    if(user_id == 'clear') {
      emitQuery()
      return
    }
    if(user_id) {
      const userinfo = action.options.find(res=>res.user_id == user_id)
      const { finance_wallet={}, uuid='' } = userinfo || {finance_wallet:{},uuid:''}
      emitQuery({
        user_id,
        uuid,
        kk_balance:finance_wallet?.kk_balance || ''
      })
    }
  }
  const emitQuery = (query:any={})=>{
    const { user_id='', uuid='', kk_balance='' } = query
    $emit('update:user_id',user_id)
    $emit('update:uuid',uuid)
    $emit('update:kk_balance',kk_balance)
  }
  defineExpose({
    remoteMethod
  })
</script>

<template>
  <el-select
    v-model="uuid"
    filterable
    remote
    placeholder="请输入用户UUID"
    value-key="user_id"
    clearable
    :remote-method="remoteMethod"
    :loading="action.loading"
    @change="selectChange"
    @clear="selectChange('clear')">
    <el-option
      v-for="item in action.options"
      :key="item.user_id"
      :label="`uuid:${item.uuid} \xa0\xa0\xa0\xa0 昵称：${item.nickname}`"
      :value="item.user_id">
    </el-option>
  </el-select>
</template>
